<template>
	<view style="padding-bottom: 140rpx;">
		<view class="tab-content">
			<!-- <u-sticky :z-index="1000"> -->
				<view class="nav">
					<uni-nav-bar fixed leftIcon="left" :border="false" @clickLeft="back" backgroundColor="#F5F7F8"
						title="技师提现管理">
						<view slot="right" class="daochu" @click="showRightPopup">
							<image style="width: 50rpx;height: 14rpx;" src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/more.png" mode=""></image>
						</view>
					</uni-nav-bar>
					<u-tabs :list="typelist" :show-bar="false" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
				
			<!-- </u-sticky> -->
			<mescroll-body height="500px" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
				<view class="withdraw-list box-content">
					<view class="each-withdraw" @click.stop="todetail(item)" v-for="(item,index) in list" :key="index">
						<view class="fixed-status" style="background-color: #ffeebc;color: #bd7729;" v-if="item.status == 1"> 
							审核中
						</view>
						<view class="fixed-status" style="background-color: #cde5ff;color: #3393FF;" v-if="item.status == 2">
							审核成功
						</view>
						<view class="fixed-status" style="background-color:#FFE7E7;color: #FF0000;" v-if="item.status == 3">
							审核失败
						</view>
						<view class="header-img">
							<image class="header-img" :src="item.worm_image" mode="aspectFill"></image>
							<image @click.stop="chooseItem(item)" v-if="item.checked && item.status == 1" class="fixed-icon"
								src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/xuan.png" mode=""></image>
							<image @click.stop="chooseItem(item)" v-if="!item.checked && item.status == 1" class="fixed-icon"
								src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/no-xuan.png" mode=""></image>
						</view>
						<view class="right-content">
							<view class="name-phone">
								<view>{{item.real_name}} <text>{{item.age}}岁 </text><text>{{item.gende ==1?'男':'女'}}</text></view>
								<view class="phone-content" @click.stop="callPhone(item)">
									{{item.mobile}} <image src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/phone.png"
										mode=""></image>
								</view>
							</view>
							<view class="datum-list">
								<view class="item-datum">
									<view class="item-title">接单数量</view>
									<view class="info">{{item.order_num}}单</view>
								</view>
								<view class="item-datum">
									<view class="item-title">接单金额</view>
									<view class="info">{{item.order_price}}</view>
								</view>
								<view class="item-datum">
									<view class="item-title">申请时间</view>
									<view class="info">{{item.create_time}}</view>
								</view>
							</view>
							<view class="item-datum" style="display: flex;align-items: center;margin-bottom: 10rpx;">
								<view class="item-title" style="font-size: 24rpx;margin-right: 20rpx;color: #888888;">提现金额</view>
								<view class="info" style="color: #FF0000;font-weight: bold;font-size: 24rpx;">{{item.price}}元</view>
							</view>
							<view class="item-datum" style="display: flex;align-items: center;">
								<view class="item-title" style="font-size: 24rpx;margin-right: 20rpx;color: #888888;">提现周期</view>
								<view class="info" style="font-size: 24rpx;">{{item.start_time}} 至 {{item.end_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<view class="fixed-bottom" v-if="current == 0">
			<view class="all-choose" @click="changeCheck">
				<image v-if="isall" src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/xuan.png" mode="">
				</image>
				<image v-else src="https://qiniu-cdn.maeiyun.com/imgs/shangjia/no-xuan.png" mode=""></image>
				全选
			</view>
			<view class="btn bohui" @click="rejectFn">
				驳回
			</view>
			<view class="btn affirm" @click="resolveFn">
				通过
			</view>
		</view>
		<u-modal v-model="show1" show-cancel-button  title="是否驳回?" @confirm="feedback1">
			<view class="slot-content">
				<input type="text" v-model="check_content" placeholder="输入驳回理由"/>
			</view>
		</u-modal>
		<u-modal v-model="show2" show-cancel-button	@confirm="feedback2" :content="content"></u-modal>
		<u-calendar v-model="showC" mode="range"   @change="changeCalendar"></u-calendar>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				typelist: [{
					name: '待审核'
				}, {
					name: '已审核'
				}],
				current: 0,
				downOption: {
					auto: false
				},
				list: [],
				isall: false,
				show1: false,
				show2:false,//
				content: "",
				showC:false,
				mode: 'range',
				check_content:"",
				ids:""
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			callPhone(item){
				this.$util.makeCall(item.mobile)
			},
			change(e) {
				this.current = e
				this.downCallback()
			},
			changeCheck() {
				this.isall = !this.isall
				if (this.isall) {
					this.list.map(item => {
						item.checked = true
					})
				} else {
					this.list.map(item => {
						item.checked = false
					})
				}
			},
			todetail(item) {
				uni.navigateTo({
					url: '/pages/technicianWithdraw/withdrawalDetails?id='+item.id
				})
			},
			chooseItem(item) {
				item.checked = !item.checked
			},
			async changArr() {
				var arr = []
				await this.list.map(item => {
					if (item.checked && item.status == 1) {
						arr.push(item.id)
					}
				})
				if(arr.length<1){
					this.isall = false
					return ''
				}
				return arr.toString()
			},
			feedback1(){ //驳回
				this.changArr().then(res => {
					if(res == ''){
						this.$util.msg('暂无数据')
						return 
					}else{
						this.commit(3,res)
					}
				})
			},
			feedback2(){ //通过审核
				this.changArr().then(res => {
					if(res == ''){
						this.$util.msg('暂无数据')
						return 
					}else{
						this.commit(2,res)
					}
				})
			},
			rejectFn() {
				this.changArr().then(res => {
					if(res == ''){
						this.$util.msg('暂无可选数据')
						return 
					}else{
						this.content = "是否驳回？"
						this.show1 = true
						this.check_content = ''
					}
				})
				
			},
			resolveFn() {
				this.changArr().then(res => {
					if(res == ''){
						this.$util.msg('暂无可选数据')
						return 
					}else{
						this.content = "是否通过？"
						this.show2 = true
					}
				})
				
			},
			commit(type,ids){
				let that = this
				this.request.httpTokenRequest({
					url: "store.team/setTechnicianWithdraw",
					method: "POST"
				}, {
					id: ids,
					status:type,
					check_content:this.check_content
				}).then(res => {
					if (res.code == 0) {
						that.$util.msg(res.msg)
						that.downCallback()
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
			showRightPopup() {
				var that = this
				uni.showActionSheet({
					itemList: ['导出数据', '导出中心'],
					success: function (res) {
						if(res.tapIndex == 0 ){
							that.showC = true
							return
						}else{
							uni.navigateTo({
								url:'/pages/technicianWithdraw/record'
							})
						}
					},
					fail: function (res) {
					}
				});
				
			},
			confirm() {},
			changeCalendar(date){
				var that = this
				var newdate = date.startDate+"~"+date.endDate
				this.request.httpTokenRequest({
					url: "store.order/saveUploadLog",
					method: "POST"
				}, {
					start_time:newdate
				}).then(res => {
					if (res.code == 0) {
						that.$util.msg(res.msg)
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/technicianWithdraw/record'
							})
						},1500)
						
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
				})
			},
			downCallback() {
				this.list = []
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let that = this
				this.request.httpTokenRequest({
					url: "store.team/getTechnicianWithdrawLog",
					method: "get"
				}, {
					status: this.current == 0?1:'2,3',
					page:page.num
				}).then(res => {
					if (res.code == 0) {
						res.data.data.map(item => {
							item.checked = false
							that.list.push(item)
						})
						that.mescroll.endSuccess(that.list.length)
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			}
		},
		onLoad() {
			this.isshow = true
		}
	}
</script>

<style lang="scss">
	.nav{
		padding-top: var(--status-bar-height);
		background-color: #F5F7F8;
		position: sticky;
		top: 0;
		z-index: 99;
	}
	.uni-navbar__header-btns .uni-navbar__header-btns-right {
		width: 180rpx !important;
	}
	.uni-navbar__header-btns-right {
		width: 180rpx !important;
	}
	.daochu {
		// display: flex;
		// align-items: center;
		// font-size: 30rpx;
		// font-family: PingFangSC, PingFang SC;
		// font-weight: 400;
		// color: #8F8F8F;
		// width: 180rpx !important;

		// image {
		// 	width: 32rpx;
		// 	height: 30rpx;
		// 	flex: 0 0 auto;
		// }
	}

	//
	.each-withdraw {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(232, 232, 232, 0.5);
		border-radius: 20rpx;
		margin-top: 20rpx;
		position: relative;
		.fixed-status{
			position: absolute;
			top: 0;
			left: 0;
			font-size: 22rpx;
			padding: 0 20rpx;
			color: #FFFFFF;
			height: 40rpx;
			line-height: 40rpx;
			border-top-left-radius: 10rpx;
			// border-bottom: 10rpx;
		}
		.header-img {
			position: relative;
			width: 104rpx;
			height: 130rpx;
			border-radius: 10rpx;
			flex: 0 0 auto;

			.fixed-icon {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				left: 0;
				bottom: 0;
				z-index: 99;
			}
		}

		.right-content {
			flex-grow: 1;
			margin-left: 21rpx;

			.name-phone {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #0F0807;
				line-height: 40rpx;

				text {
					font-size: 24rpx;
					margin-left: 10rpx;
				}

				image {
					width: 22rpx;
					height: 22rpx;
					margin-left: 19rpx;
				}

				.phone-content {
					margin-left: auto;
				}
			}

			.datum-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 15rpx;

				.item-datum {
					min-width: 50%;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.item-title {
						font-size: 24rpx;
						font-weight: 400;
						color: #888888;
						line-height: 33rpx;
					}

					.info {
						font-size: 24rpx;
						font-weight: 400;
						color: #000;
						line-height: 33rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.fixed-bottom {
		display: flex;
		align-items: center;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		z-index: 99;
		.all-choose {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #0F0807;
			line-height: 42rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 11rpx;
			}
		}

		.btn {
			width: 200rpx;
			height: 68rpx;
			border-radius: 34rpx;
			border: 1rpx solid #949494;
			text-align: center;
			line-height: 68rpx;
		}

		.bohui {
			margin-left: 176rpx;
		}

		.affirm {
			margin-left: auto;
			background: #3393FF;
			border: 0;
			color: #FFFFFF;
		}
	}
	//
	.slot-content{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		input{
			font-size: 28rpx;
			height: 60rpx;
			text-align: center;
			
		}
	}
</style>